<template>
  <vxe-table
    ref="mytable"
    class="mytable"
    :class="tableClass"
    :stripe="tableStripe"
    :height="tableHeight"
    :header-cell-style="{ height: headerHeight + 'px' }"
    show-overflow
    :row-config="{ height: rowHeight }"
    :seq-config="seqFunc"
    :scroll-y="{ enabled: true, type: 'loop' }"
    :data="tableData"
  >
    <vxe-column type="seq" :title="seqTitle" :width="seqWidth"></vxe-column>
    <vxe-column
      v-for="item in tableFields"
      :key="item"
      :field="item.field"
      :title="item.title"
      :width="item.width"
    ></vxe-column>
    <vxe-column v-if="showCaozuo" title="操作">
      <template #default="{ row }">
        <button class="btnxuanzhong" @click="useThisSecretKey(row)">{{ an1text }}</button>
      </template>
    </vxe-column>
  </vxe-table>
</template>

<script setup>
import { reactive, ref, defineProps, defineEmits, onMounted, getCurrentInstance } from 'vue'
const ctx = getCurrentInstance()
const mytable = ref(null)
let intervalId = ref(null)
const emit = defineEmits(['select_sec_key'])
defineProps({
  tableFields: Object,
  tableScroll: Boolean,
  tableStripe: Boolean,
  tableData: Object,
  seqTitle: String,
  seqNoPre: String,
  seqWidth: Number,
  tableHeight: Number,
  headerHeight: Number,
  rowHeight: Number,
  intarvalTime: Number,
  intervalFrames: Number,
  seqNoStart: Number,
  seqNoPadLength: Number,
  showCaozuo: Boolean,
  tableClass: String,
  an1text: String
})
function useThisSecretKey(row) {
  emit('select_sec_key', row)
}
const seqFunc = reactive({
  seqMethod({ rowIndex }) {
    let seqNo = String(rowIndex + ctx.props.seqNoStart).padStart(ctx.props.seqNoPadLength, '0')
    // return `${ ctx.props.seqNoPre}${rowIndex+ctx.props.seqNoStart}`
    return `${ctx.props.seqNoPre}${seqNo}`
  }
})
const scrollTable = (obj) => {
  let scrollJuli =
    (ctx.props.tableData.length -
      Math.floor((ctx.props.tableHeight - ctx.props.headerHeight) / ctx.props.rowHeight)) *
    ctx.props.rowHeight
  let scrollTop = obj.$el.scrollTop
  intervalId.value = setInterval(() => {
    if (obj && ctx.props.tableScroll) {
      // 设置新的滚动位置
      obj.$el.children[1].children[0].children[1].scrollTo(0, scrollTop)

      scrollTop += ctx.props.rowHeight / ctx.props.intervalFrames
      if (scrollTop > scrollJuli) {
        scrollTop = 0
      }
    }
  }, ctx.props.intarvalTime / ctx.props.intervalFrames)
}
onMounted(() => {
  // 获取当前滚动位置
  const $table = ctx.refs.mytable

  scrollTable($table)
})
</script>
<style lang="scss" scoped>
.mytable {
  width: 100%;
  height: 100%;
  font-size: 1.1rem;
  border: 1px solid red;
}
.seckey_table {
  :deep(.vxe-header--row) {
    background-color: #c3e8a7 !important;
  }
  :deep(.vxe-body--row) {
    background-color: #dde9db !important;
  }
  :deep(.row--stripe) {
    background-color: #c0e0d0 !important;
  }
  :deep(.btnxuanzhong) {
    color: #d2811e;
    background-color: #15fa93;
  }
}
.regcode_table {
  :deep(.vxe-header--row) {
    background-color: #3aaaff !important;
  }
  :deep(.vxe-body--row) {
    background-color: #a2f3ff !important;
  }
  :deep(.row--stripe) {
    background-color: #15d7fa !important;
  }
  :deep(.btnxuanzhong) {
    color: chocolate;
    background-color: #15d7fa;
  }
}
</style>
